<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Store</title>
<link rel="stylesheet" type="text/css" href="${path }/style/style.css" />
	<style>
    	
    </style>
   <script type="text/javascript" src="${path }/js/proCity.js"></script>
    <script>
    	function addAddress(){
			var addressDiv = document.getElementById("new_Address");
			
			var maskDiv = document.createElement("div");
			maskDiv.id = "mask";
			maskDiv.style.position="absolute";
			
			var l = getScrollTop();
			
			maskDiv.style.top = l + "px";
			maskDiv.style.left = "0";
			var w = document.body.clientWidth;
			var h = document.documentElement.clientHeight;
			maskDiv.style.width = w +"px";
			maskDiv.style.height = h + "px";
			maskDiv.style.zIndex="2";
			maskDiv.style.backgroundColor="#CCC";
			maskDiv.style.opacity = "0.5";

			document.body.appendChild(maskDiv);
			
			addressDiv.style.position = "absolute";
			addressDiv.style.display = "block";
			addressDiv.style.zIndex = "4";
			addressDiv.style.top = (l+60)+"px";
			addressDiv.style.left = "300px";
		}
		
		//获得滚动条滚动的距离
		function getScrollTop() {  
			var scrollPos;  
			if (window.pageYOffset) {  
				scrollPos = window.pageYOffset; 
			}else if (document.compatMode && document.compatMode != 'BackCompat'){
				scrollPos = document.documentElement.scrollTop;
			}else if(document.body){
				scrollPos = document.body.scrollTop; 
			}   
			return scrollPos;   
		}
		
		//关闭添加地址页面
		function closeDiv(obj){
			var addressDiv = document.getElementById("new_Address");
			
			var maskDiv = document.getElementById("mask");
			document.body.removeChild(maskDiv);
			
			addressDiv.style.display = "none";
		}
		
		
		function saveAddress(){
			var province  = document.getElementById("province").value;
			var city = document.getElementById("city").value;
			var area = document.getElementById("area").value;
			
			if(/^\s*$/.test(province)){
				alert("省份不能为空");
				return ;
			}
			if(/^\s*$/.test(city)){
				alert("城市不能为空");
				return ;
			}
			if(/^\s*$/.test(area)){
				alert("区域不能为空");
				return ;
			}
			var baseAddress = province+city+area;
			var detaiAddress = document.getElementById("address_detail").value;
			if(/^\s*$/.test(detaiAddress)){
				alert("详细地址不能为空");
				return ;
			}
			var code = document.getElementById("code").value;
			if(!/[1-9]\d{5}(?!\d)/.test(code)){
				alert("符合邮编格式");
				return ;
			}
			var reciver = document.getElementById("reciver").value;
			if(/^\s*$/.test(reciver)){
				alert("收货人不能为空");
				return ;
			}
			var tel = document.getElementById("tel").value;
			if(!/^1[3|4|5|7|8]\d{9}$/.test(tel)){
				alert("符合手机号规则");
				return ;
			}
			var isDefault = document.getElementById("isDefault").value;
			
			var xmlHttp = new XMLHttpRequest();
			var url = "${path }/permission/order/saveAddress";
			var param = "baseAddress="+baseAddress+"&detailAddress="+detaiAddress+"&reciver="+reciver+"&code="+code+"&tel="+tel+"&isDefault="+isDefault;
			xmlHttp.open("post",url,true);
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
			xmlHttp.send(param);
			
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.status == 200){
					if(xmlHttp.readyState == 4){
						var s = xmlHttp.responseText;
						if(s == '1'){
							alert("添加成功!");
							var addressDiv = document.getElementById("new_Address");
							var maskDiv = document.getElementById("mask");
							document.body.removeChild(maskDiv);
							addressDiv.style.display = "none";
							
							location.reload();
						}else {
							alert("添加失败!");
						}
						
						
					}
				}
			}
			
			
			
		}
		
		function selectLi(num){
			var lis = document.getElementsByName("address");
			
			for(var i=0;i<lis.length;i++){
				if(i == num){
					lis[i].parentNode.style.border="2px dotted red";
				}else {
					lis[i].parentNode.style.border="";	
				}	
			}
			
		}
		
		
		onload = function(){
			var checks = document.getElementsByName("address");
			
			for(var i=0;i< checks.length;i++){
				if(checks[i].checked){
					checks[i].parentNode.style.border="2px dotted red";
				}
			}	
		}
		
		
		function submitOrder(){
			var radios = document.getElementsByName("addressRadio");
			var bookIds = document.getElementsByName("hiddenBookId");
			var bids = '';
			var addressId = '';
			
			var flag = false;
			if(radios){
				for(var i=0;i<radios.length;i++){
					if(radios[i].checked){
						addressId = radios[i].value;
						flag = true;
						break;
					}
				}
				
				for(var i=0;i<bookIds.length;i++){
					bids += bookIds[i].value + ":";
				}
				
				if(flag){
					window.location = "${path}/permission/order/saveOrder?addressId="+addressId+"&bids="+bids.substring(0,bids.length-1);
				}else {
					alert("请选择地址！");
				}
			}else {
				alert("请添加地址！");
			}
		}
    </script>

</head>
<body onload="showXML()">
<div id="wrap">

      <%@ include file="../common/header.jsp" %>
       
       
       <div class="center_content">
       	<div class="left_content">
        	<div class="address"><span class="title_icon"><img src="${path }/images/bullet1.gif" alt="" title="" /></span>选择送货地址</div>
        	
            <div class="address_list" id="address_list">
            	<ul>
            		<c:if test="${empty as.as }">
            			<li>没有地址</li>
            		</c:if>
            		<c:if test="${not empty as.as }">
            			<c:forEach var="a" items="${as.as }" varStatus="vs">
            				<li><c:if test="${a.isDefault eq '1'}"><input type="radio" name="addressRadio" value="${a.addressId }" onclick="selectLi('${vs.index }')">&nbsp;${a.area }${a.detailAddres }&nbsp;${a.reciver }&nbsp;&lt;收&gt; </c:if></li>
            			</c:forEach>
            		</c:if>
                	
                </ul>
            </div>
            
            <div class="address_more"><a href="#">更多地址</a></div>
            
            <div class="address_new"><input type="button" value="使用新地址" onclick="addAddress()"  /></div>
            
            <div id="new_Address" class="new_Address">
            	<div class="closeDiv"><a href="javascript:closeDiv()">X</a></div>
                
                <div class="address_title">添加收货地址：</div>
                
                <div class="address_ps"> <span style="color:#FC0">新增收货地址</span>　<span style="color:#999; font-size:10px">电话号码、手机号选填一项,其余均为必填项</span></div>
                
                <div class="newAddress_detail">
                	<form action="" method="post">
                    	<table>
                        	<tr>
                            	<td align="right">所在地区：<span style="color:#F00">*</span></td>
                                <td>
                                	<select id="province"  onchange="showCity()" >
									  <option value="">--请选择你的省份--</option>
									</select>
									<select id="city"  onchange="showArea()">
									  <option value="">--请选择你的城市--</option>
									</select>
									<select id="area" >
									  <option value="">--请选择你的地区--</option>
									</select>
                                </td>
                            </tr>
                            	<td align="right">详细地址：<span style='color:#F00'>*</span></td>
                                <td>
                                	<textarea id="address_detail" name="address_detail" rows="2" cols="23" id="address_detail"></textarea>
                                </td>
                            </tr>
                            
                            <tr>
                            	<td align="right">邮政编码:<span style="color:#F00">*</span></td>
                                <td>
                                	<input type="text" id="code" name="code" id="code" />
                                </td>
                            </tr>
                            
                            <tr>
                            	<td align="right">收货人姓名:<span style="color:#F00">*</span></td>
                                <td>
                                	<input type="text" id="reciver" name="reciverName" id="reciverName" />
                                </td>
                            </tr>
                            
                            <tr>
                            	<td align="right">手机号:<span style="color:#F00">*</span></td>
                                <td>
                                	<input type="text" id="tel" name="tel" placeholder-="请符合手机号规则" id="tel" />
                                </td>
                            </tr>
                            
                             <tr>                          	
                                <td colspan="2" align="center">
                                	<input type="checkbox" name="defaultAddress" id="isDefault" value="1" />设为默认地址
                                </td>
                            </tr>
                            
                            <tr>                          	
                                <td colspan="2" align="center">
                                	<input style="background-color:orange;color:#FFF;width:70px;" type="button" onclick="saveAddress()" name='button1' value="保存" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                
                
            </div>
        
            <div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" /></span>我的购物车</div>
        
        	<div class="feat_prod_box_details">
            
            <table class="cart_table">
            	<tr class="cart_title">
                	<td>图片</td>
                	<td>书名</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>合计</td>               
                </tr>
                <c:set var="p" value="0.0"></c:set>
                <c:forEach var="oi" items="${selectItem }">
                	<tr>
	                	<td><a href="${path }/book/detailBook?bookId=${oi.book.bookId}"><input type="hidden" name="hiddenBookId" value="${oi.book.bookId }"/><img style="width:23px;height:35px;" src="${path }/images/${oi.book.imgUrl }" alt="" title="" border="0" class="cart_thumb" /></a></td>
	                	<td>${oi.book.bookName }</td>
	                    <td>${oi.book.price }元</td>
	                    <td>${oi.count }</td>
	                    <td>${oi.allPrice }$</td>
	                    
	                    <c:set var='p' value='${p + oi.allPrice }'></c:set>               
	                </tr>    
                </c:forEach>
            	      
                <tr>
                <td colspan="4" class="cart_total"><span class="red">总价:</span></td>
                <td> ${p }$</td>                
                </tr>  
                
                <tr>
                <td colspan="4" class="cart_total"><span class="red">优惠后:</span></td>
                <td> ${p }$</td>                
                </tr>                  
            
            </table>
            <a href="javascript:void(0)" onclick="window.location='${path }/book/IndexAction'" class="continue">&lt; 返回购物车修改</a>
            <a href="javascript:void(0)" onclick="submitOrder()" class="checkout">提交订单</a>
            
            </div>	
            
        <div class="clear"></div>
        </div><!--end of left content-->
        
        <div class="right_content">
        
                	<div class="languages_box">
            <span class="red">Languages:</span>
            <a href="#"><img src="${path }/images/gb.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/fr.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/de.gif" alt="" title="" border="0" /></a>
            </div>
                <div class="currency">
                <span class="red">Currency: </span>
                <a href="#">GBP</a>
                <a href="#">EUR</a>
                <a href="#"><strong>USD</strong></a>
                </div>
                
                
              <div class="cart">
                  <div class="title"><span class="title_icon"><img src="images/cart.gif" alt="" title="" /></span>我的购物车</div>
                  <div class="home_cart_content">
                  ${cart.allcount }个商品 | <span class="red">总价: ${cart.allPrice }$</span>
                  </div>
                  <a href="${path }/jsp/cart/cart.jsp" class="view_cart">查看购物车</a>
              
              </div>
        
             <div class="title"><span class="title_icon"><img src="images/bullet3.gif" alt="" title="" /></span>关于我们店</div> 
             <div class="about">
             <p>
             <img src="${path }/images/about.gif" alt="" title="" class="right" />
             本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
             </p>
             
             </div>
             
             <div class="right_box">
             
             	<div class="title"><span class="title_icon"><img src="images/bullet4.gif" alt="" title="" /></span>推荐图书</div> 
                    <c:forEach var="t" items="${tuijianBook.books }">
			           <div class="new_prod_box">
			               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')">${t.bookName }</a>
			               <div class="new_prod_bg">
			               <span class="new_icon"><img src="${path }/images/promo_icon.gif" alt="" title="" /></span>
			               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')"><img  src="${path }/images/${t.imgUrl }" style="width:60px;height:90px" alt="" title="" class="thumb" border="0" /></a>
			               </div>           
			           </div>
			        </c:forEach>  
                    
             </div>
             
             <div class="right_box">
             
             	<div class="title"><span class="title_icon"><img src="images/bullet5.gif" alt="" title="" /></span>图书分类</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>                                              
                </ul>
                
             	<div class="title"><span class="title_icon"><img src="images/bullet6.gif" alt="" title="" /></span>合作伙伴</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>                              
                </ul>      
             
             </div>         
             
        
        </div><!--end of right content-->
        
        
       
       
       <div class="clear"></div>
       </div><!--end of center content-->
       
              
       <%@ include file="../common/foot.jsp" %>
    

</div>

</body>
</html>